define(
   [
      'dojo/_base/declare',
      'dojo/on',
      'dojo/dom',
      'dojo/_base/lang',
      'dojo/dom-construct',
      'dijit/TitlePane'
   ],
   function(declare, on, dom, lang, domConstruct, TitlePane)
   {
      return declare([],
      	 {
      	    classCode: 'InitD3',
      	    svg:null,
      	    force:null,
      	    node:null,
      	    link:null,
      	    
      	    constructor:function(args)
      	    {
      	       console.log(this.classCode, "I'm in constructor", this.classCode);
      	    },
      	    
      	    postscript:function()
      	    {
      	       console.log(this.classCode, "I'm in postscript", this.classCode);
      	       var width = 500, height = 500;
      	       
      	       var nodes = {
      	       	  node0:{name:'node0',x:250,y:250,fixed:true},
      	       	  node1:{name:'node1',x:400,y:200,fixed:false},
      	       	  node2:{name:'node2',x:200,y:400,fixed:false},
      	       	  node3:{name:'node3',x:400,y:400,fixed:false}
      	       };
      	       
      	       var links = 
      	       [
      	       	  {source:nodes.node0,target:nodes.node1, type:'acaso'},
      	       	  {source:nodes.node0,target:nodes.node2, type:'acaso'},
      	       	  {source:nodes.node0,target:nodes.node3, type:'acaso'},
      	       	  {source:nodes.node2,target:nodes.node3, type:'acaso'}
      	       ];
      	       
      	       nodes = d3.values(nodes);
      	       
      	       //nodes = generateNodes(10);
      	       //links = generateLinks(nodes,4);
      	       //links = d3.values(links);
      	       
      	       nodes[0].fixed = true;
      	       nodes[0].x = 250;
      	       nodes[0].y = 250;
      	       
      	       this.force = d3.layout.force()
      	       .nodes(nodes)
      	       .links(links)
      	       .size([width, height])
      	       .linkDistance(200)
      	       .charge(-300)
      	       .on("tick", lang.hitch(this,this.tick))
      	       .start();
      	       
      	       this.svg = d3.select("body")
      	       .append("svg")
      	       .attr("width", width)
      	       .attr("height", height)
      	       .attr("class", "svg");
      	       
      	       this.svg.append("svg:defs").selectAll("marker")
      	       .data(["acaso"])
      	       .enter().append("svg:marker")
      	       .attr("id", String)
      	       .attr("viewBox", "0 -5 10 10")
      	       .attr("refX", 20)
      	       //.attr("refY", -1.5)
      	       .attr("markerWidth", 6)
      	       .attr("markerHeight", 6)
      	       .attr("orient", "auto")
      	       .append("svg:path")
      	       .attr("d", "M0,-5L10,0L0,5");
      	       
      	       this.link = this.svg.selectAll(".link")
      	       .data(this.force.links()) // set data             
      	       .enter()
      	       .append("line")
      	       .attr("class", "link")
      	       .attr("marker-end", function(d){return "url(#"+d.type+")";});
      	       
      	       this.node = this.svg.selectAll(".node")
      	       .data(this.force.nodes()) // set data
      	       .enter()
      	       .append("g")
      	       .attr("class", "node")
      	       .on("mouseover", this.mouseover)
      	       .on("mouseout", this.mouseout)
      	       .call(this.force.drag);
      	       
      	       this.node.forEach(lang.hitch(this,function(d, i)
      	       	  {
      	       	     d.x = d.y = width / this.node.length * i;
      	       	  }));
      	       
      	       this.node.append("circle")
      	       .attr("r", 8);
      	       
      	       this.node.append("image")
      	       .attr("class", "circle")
      	       .attr("xlink:href", "images/icon.png")
      	       .attr("x", "-16px")
      	       .attr("y", "-16px")
      	       .attr("width", "32px")
      	       .attr("height", "32px")
      	       .attr("display","none");
      	       
      	       //this.node.append("foreignObject")
      	       //.attr("width", 102)
      	       //.attr("height", 102)
      	       //.attr("x",20)
      	       //.attr("y",20);
      	       //.append("xhtml:body")
      	       //.append("xhtml:div")
      	       //.attr("class","myTextBox")
      	       //.html(lang.hitch(this, function(value){return this._createDom(value.name);}));// "<div id=\""+value.name+"\"><p>Titoletto<\/p><p>Testo esteso<\/p>";});
      	       //.html(tmp.innerHTML);
      	       
      	       //var tp = new TitlePane({'title':"Titolo", 'content': "acaso"});
      	       //dom.byId("node0").appendChild(tp.domNode);
      	       //tp.startup();
      	       
      	       this.node.append("text")
      	       .attr("x", 12)
      	       .attr("dy", ".35em")
      	       .text(function(d) { return d.name; });
      	    },
      	    
      	    mouseover:function()
      	    {
      	       d3.select(this).select("circle").transition()
      	       .duration(100)
      	       .attr("r", 16);
      	       d3.select(this).select("body")
      	       .style("display", "block");
      	       d3.select(this).select("image")
      	       .attr("display","block");
      	       //d3.select(this).select("body").transition()
      	       //    .duration(100)
      	       //    .style("height", 102);
      	    },
      	    
      	    mouseout:function() {
      	       d3.select(this).select("circle").transition()
      	       .duration(100)
      	       .attr("r", 8);
      	       d3.select(this).select("body")
      	       .style("display", "none");
      	       d3.select(this).select("image")
      	       .attr("display","none");
      	       //d3.select(this).select("body").transition()
      	       //    .duration(100)
      	       //    .style("height", 0);
      	    },
      	    
      	    tick:function() {
      	       this.link
      	       .attr("x1", function(d) { return d.source.x; })
      	       .attr("y1", function(d) { return d.source.y; })
      	       .attr("x2", function(d) { return d.target.x; })
      	       .attr("y2", function(d) { return d.target.y; });
      	       
      	       this.node//.attr("cx", function(d) { return d.x; })
      	       //.attr("cy", function(d) { return d.y; });
      	       .attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
      	    },
      	    
      	    _createDom:function(name)
      	    {
      	       var pos = "last";
      	       var n = "<div id=\""+name+"\" ></div>";
      	       //domConstruct.create("p", {
      	       //	     innerHTML: title
      	       //},n,pos);
      	       //domConstruct.create("p", {
      	       //	     innerHTML: text
      	       //},n,pos);
      	       
      	       return n;
      	    },
      	    
      	    endOfLib:null
      	 });
   });
